<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import { getCourseList } from '@/api/course';
  import useTable from '@/hooks/table';
  import { CourseItem, CourseSearchParams } from '@/types/course';
  import CourseCard from '@/components/course-card/index.vue';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import SearchForm from './search-form.vue';

  const router = useRouter();

  const { pager, loading, total, list } = useTable<CourseItem>();

  const searchParams = ref<CourseSearchParams>({});

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getCourseList({
        ...pager.value,
        ...searchParams.value,
        status: [2],
      });
      total.value = res?.data?.data?.total || 0;
      list.value = res?.data?.data?.list || [];
    } finally {
      loading.value = false;
    }
  };

  const handleSearch = (params: CourseSearchParams) => {
    pager.value.pageIndex = 1;
    searchParams.value = params;
    getData();
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    getData();
  };

  onMounted(() => {
    getData();
  });

  const goToDetail = (id: number) => {
    const info = router.resolve({
      name: 'CourseDetailApp',
      query: {
        id,
      },
    });
    window.open(info.href);
  };
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="已入驻球场" :bordered="false">
          <SearchForm @submit="handleSearch" />
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-row
            align="center"
            justify="space-between"
            style="margin-bottom: 15px"
          >
            <a-col flex="none">
              共计
              <span style="font-weight: 600; color: rgb(var(--primary-6))">
                {{ total }}
              </span>
              个球场
            </a-col>
            <a-col flex="none">
              <!-- <a-button>
                <template #icon><icon-nav /></template>
                自定义列
              </a-button> -->
            </a-col>
          </a-row>

          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="{
              total,
              current: pager.pageIndex,
              pageSize: pager.pageSize,
              showTotal: true,
              showJumper: true,
            }"
            @page-change="handlePageIndexChanged"
          >
            <template #columns>
              <a-table-column title="球场" fixed="left">
                <template #cell="{ record }">
                  <CourseCard :course-info="record" />
                </template>
              </a-table-column>
              <a-table-column title="联系人" :width="150">
                <template #cell="{ record }">
                  <div>
                    <div>{{ record.contactName }}</div>
                    <div>{{ record.contactTel }}</div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="绑定差点系统" :width="180">
                <template #cell="{ record }">
                  <div>
                    {{ record.officeId ? '已绑定' : '未绑定' }}
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="地区" :width="300">
                <template #cell="{ record }">
                  <div>
                    <div>
                      {{
                        ProvinceJSON.find((i) => i.id === record.province)?.name
                      }}
                    </div>
                    <div>
                      {{
                        CityJSON[record.province as keyof typeof CityJSON].find(
                          (i) => i.id === record.city
                        )?.name
                      }}
                    </div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="入驻时间" :width="200">
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column
                title="操作"
                :width="100"
                fixed="right"
                align="center"
              >
                <template #cell="{ record }">
                  <a-button @click="goToDetail(record.id)">详情</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
